<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <title>Document</title>
    <script src="./front/iconfont.js"></script>
    <link rel="stylesheet" href="./front/iconfont.css">
    <link rel="stylesheet" href="./css/home.css">
</head>  
<body>
    <div id="main">
        <!-- 头部导航栏 -->       
        <div class="tt">
        <div class="tnav">
            <!-- 头部导航栏上面的文字 -->
            <span class="warp_text">发现</span>
            <span class="enlarge">精选</span>
            <span class="warp_text">男生</span>
            <span class="warp_text">免费</span>
            <span class="warp_text">更新</span>
            <span class="warp_text">活动</span>
            <span>
                <svg class="icon top_icon" aria-hidden="true">
                    <use xlink:href="#icon-icon_daohang_caidan"></use>
                </svg>
            </span>
        </div>
        <!-- 发现 -->
        <div class="content ">
            <ul>
                <li>
                    
                    <a href="#">
                        <img src="./img/fx1.jpg" alt="">
                        <h4>玷染</h4>
                        <span>已更23话</span>
                        <span>复仇/强强</span>
                        <p>恋爱类top10佳作</p>
                    </a>
                </li>
                <li>
                    
                    <a href="#">
                        <img src="./img/fx2.jpg" alt="">
                        <h4>强占君父</h4>
                        <span>已更19话</span>
                        <span>古风/撒糖</span>
                        <p >强制爱选手，天天沉迷吸狐</p>
                    </a>
                </li>
                <li>
                    
                    <a href="#">
                        <img src="./img/fx3.jpg" alt="">
                        <h4>祭品新娘把恶龙拐跑啦！</h4>
                        <span>已更30话</span>
                        <span>每周一五更新</span>
                        <p >新作top30奇幻类佳作</p>
                    </a>
                </li>
                <li>
                    
                    <a href="#">
                        <img src="./img/fx4.jpg" alt="">
                        <h4>食色</h4>
                        <span>已更18话</span>
                        <span>每周日更新</span>
                        <p >傲娇美食家看人吃饭产生情欲</p>
                    </a>
                </li>
                <li>
                    
                    <a href="#">
                        <img src="./img/fx5.jpg" alt="">
                        <h4>以下欺上</h4>
                        <span>已更19话</span>
                        <span>复仇/强强</span>
                        <p >恋爱类top10佳作</p>
                    </a>
                </li>
                <li>
                    
                    <a href="#">
                        <img src="./img/fx6.jpg" alt="">
                        <h4>逆徒每天都想欺师犯上</h4>
                        <span>已更154话</span>
                        <span>古风/大女主</span>
                        <p >恋爱类top10佳作</p>
                    </a>
                </li>
                <div class="null">&nbsp;</div>
            </ul>
            
        </div>
        <!-- 精选 -->
         <div class="content show">
            <div class="top_search">
                <div class="top_left">
                    <a href="#"><input class="search" placeholder="搜索"></a>
                    <svg class="icon search_icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                </div>
                    <div class="top_rigth">
                        <svg class="icon fenlei_icon" aria-hidden="true">
                            <use xlink:href="#icon-fenlei-copy"></use>
                        </svg>
                        <svg class="icon fenlei_icon" aria-hidden="true">
                            <use xlink:href="#icon-jiangbei"></use>
                        </svg>
                    </div>
            </div>
            
            <ul>
                <div class="timg">
                <img src="./img/home.jpg" alt="">
            </div>
            <div class="tlog">
                <a href="#" class="iconfont icon-jiangbei"><span>排行</span></a>
                <a href="./a.html" class="iconfont icon-fenlei-copy"><span>分类</span></a>
                <a href="#" class="iconfont icon-kapai"><span>卡牌</span></a>
                <a href="#" class="iconfont icon-lipin"><span>福利</span></a>
            </div>
                <div class="new"><h2>精品·企鹅打滚推荐</h2></div>
                <div class="cont_ul">
                    
                
                </div>
                    <div class="content_button">
                    <button>更多</button>
                    <p>|</p>
                    <button>换一批</button>
                    </div>
                
                
                <div class="null">&nbsp;</div>
            </ul>
            
        </div> 
        <!-- 男生 -->
        <div class="content">
                <div class="top_search" style="background-color: rgb(255, 255, 255);">
                    <div class="top_left">
                        <a href="#"><input class="search" placeholder="搜索"></a>
                        <svg class="icon search_icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuo"></use>
                        </svg>
                    </div>
                        <div class="top_rigth">
                            <svg class="icon fenlei_icon" aria-hidden="true">
                                <use xlink:href="#icon-fenlei-copy"></use>
                            </svg>
                            <svg class="icon fenlei_icon" aria-hidden="true">
                                <use xlink:href="#icon-jiangbei"></use>
                            </svg>
                        </div>
                </div>
                <ul>
                <div class="new"><h2>新人强推</h2></div>
            
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p>战斗类top10</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/2.jpg" alt="">
                        <h4>全职法师</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/3.jpg" alt="">
                        <h4>一人之下</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/4.jpg" alt="">
                        <h4>大奉打更人</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <div class="null">&nbsp;</div>
            </ul>
            
        </div>
        <!-- 免费 -->
        <div class="content">
            <div class="top_search" style="background-color: rgb(255, 255, 255);">
                <div class="top_left">
                    <a href="#"><input class="search" placeholder="搜索"></a>
                    <svg class="icon search_icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                </div>
                    <div class="top_rigth">
                        <svg class="icon fenlei_icon" aria-hidden="true">
                            <use xlink:href="#icon-fenlei-copy"></use>
                        </svg>
                        <svg class="icon fenlei_icon" aria-hidden="true">
                            <use xlink:href="#icon-jiangbei"></use>
                        </svg>
                    </div>
            </div>
            <ul>
                <div class="new"><h2>免费纯享,追漫巨爽</h2></div>
                <li>
                    <div class="tj">永久免费</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p>战斗类top10</p>
                    </a>
                </li>
                <li>
                    <div class="tj">永久免费</div>
                    <a href="#">
                        <img src="./img/2.jpg" alt="">
                        <h4>全职法师</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">永久免费</div>
                    <a href="#">
                        <img src="./img/3.jpg" alt="">
                        <h4>一人之下</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">永久免费</div>
                    <a href="#">
                        <img src="./img/4.jpg" alt="">
                        <h4>大奉打更人</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">永久免费</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">永久免费</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <div class="null">&nbsp;</div>
            </ul>
            
        </div>

        <div class="content">
            
            <ul>
                <div class="logo">
                    <a href="#">
                        <img src="./img/txdm_logo.png" alt="">
                    </a>
                </div>
                <div class="new"><h2>新人强推</h2></div>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p>战斗类top10</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/2.jpg" alt="">
                        <h4>全职法师</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/3.jpg" alt="">
                        <h4>一人之下</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/4.jpg" alt="">
                        <h4>大奉打更人</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <div class="null">&nbsp;</div>
            </ul>
            
        </div>

        <div class="content">
            
            <ul>
                <div class="logo">
                    <a href="#">
                        <img src="./img/txdm_logo.png" alt="">
                    </a>
                </div>
                <div class="new"><h2>新人强推</h2></div>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p>战斗类top10</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/2.jpg" alt="">
                        <h4>全职法师</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/3.jpg" alt="">
                        <h4>一人之下</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/4.jpg" alt="">
                        <h4>大奉打更人</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <div class="null">&nbsp;</div>
            </ul>
            
        </div>
        
        <div class="content">
            
            <ul>
                <div class="logo">
                    <a href="#">
                        <img src="./img/txdm_logo.png" alt="">
                    </a>
                </div>
                <div class="new"><h2>新人强推</h2></div>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p>战斗类top10</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/2.jpg" alt="">
                        <h4>全职法师</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/3.jpg" alt="">
                        <h4>一人之下</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/4.jpg" alt="">
                        <h4>大奉打更人</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <li>
                    <div class="tj">可限免</div>
                    <a href="#">
                        <img src="./img/1.jpg" alt="">
                        <h4>斗破苍穹</h4>
                        <span>已更577话</span>
                        <span>古风/战斗</span>
                        <p >莫期少年穷</p>
                    </a>
                </li>
                <div class="null">&nbsp;</div>
            </ul>
            
        </div>
    </div>
        <!-- 底部导航栏 -->
        <nav class="bnav">
                <ul>
                    <li>
                        <a href="./home_page.html">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuye"></use>
                            </svg>
                            <p>推荐</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-quanzi"></use>
                            </svg>
                            <p>圈子</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tuiguangdashiVIP"></use>
                            </svg>
                            <p>会员</p>
                        </a>
                    </li>
                    <li>

                        <a href="./bookShelf.html">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jiarushujia_01"></use>
                            </svg>
                            <p>书架</p>
                        </a>
                    </li>
                    <li>

                        <a href="./b.html">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xiepinglun"></use>
                            </svg>
                            <p>我的</p>
                        </a>
                    </li>
                </ul>
        </nav>
        
    </div>

    <script>
        var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    // this.responseText获得数据库数据
                    var jarr=JSON.parse(this.responseText) ;
                    console.log(jarr);
                    console.log(typeof jarr);
                    insert(jarr);

                }
            };
            xhttp.open("GET", "http://rap2api.taobao.org/app/mock/315873/%E8%85%BE%E8%AE%AF%E5%8A%A8%E6%BC%AB", true);
            xhttp.send();
            function insert(jarr){
                var content_li = document.querySelector('.content .cont_ul');
                jarr.forEach(function(v,i){
                    var nli=document.createElement("li");
                    nli.innerHTML=`
                    <a href="#">
                         <img src="${v.img}" alt="">
                         <h4>${v.name}</h4>
                         <span>${v.type}</span>
                     </a>
                    `;
                    content_li.appendChild(nli);
                });
            }
        var tt = document.querySelector(".tt");
        var tnav = tt.querySelector(".tnav");
        var span = tnav.getElementsByTagName("span");
        var content = tt.getElementsByClassName("content");
        var top_search = tt.querySelector(".top_search");
        for (var i = 0; i < span.length; i++) {
            span[i].index = i;
            span[i].onclick = function () {
                for (var j = 0; j < span.length; j++) {
                    content[j].style.display = "none";
                    span[j].className = "warp_text";
                }
                
                content[this.index].style.display = "block";
                this.className = "enlarge";
            }
        }
        window.onscroll=()=>{
        var st=document.documentElement.scrollTop||document.body.scrollTop;
        console.log(st/100)
        
        if(st==0 ){
            tnav.style.backgroundColor="rgb(255, 255, 255,0)";
            top_search.style.backgroundColor="rgb(255, 255, 255,0)";
        }else{
            tnav.style.backgroundColor="rgb(255, 255, 255,"+st/100+")";
            top_search.style.backgroundColor="rgb(255, 255, 255,"+st/100+")";
        }
        
       }
    </script>
</body>
</html>